<!-- 左侧菜单（单例demo） -->

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap3隐藏滑动侧边栏菜单代码</title>

	<!-- 引入bootstrap样式 -->
	<link href="/css/bootstrap.css" rel="stylesheet">
	<!-- 引入bootstrap-table样式 -->
	<link href="/css/bootstrap-table.css" rel="stylesheet">
	<!-- 菜单栏的css-->
	<link rel="stylesheet" href="/css/style.css">
	<!-- jquery -->
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<!-- bootstrap-table.min.js -->
	<script src="/js/bootstrap-table.js"></script>
	<!-- 引入中文语言包 -->
	<script src="/js/bootstrap-table-zh-CN.js"></script>

</head>
<body>

<div id="wrapper">
		<div class="overlay"></div>
	<!-- Sidebar -->
	<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
		<ul class="nav sidebar-nav">
			<li class="sidebar-brand">
				<a href="#">
				   Bootstrap 3
				</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
			</li>
			<li class="dropdown">
			  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>
			  <ul class="dropdown-menu" role="menu">
				<li class="dropdown-header">Dropdown heading</li>
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li><a href="#">Separated link</a></li>
				<li><a href="#">One more separated link</a></li>
			  </ul>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
			</li>
			<li>
				<a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
			</li>
		</ul>
	</nav>
	<!-- /#sidebar-wrapper -->

	<!-- Page Content -->
	<div id="page-content-wrapper" >
	  <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas" style="margin-top: 43px">
		<span class="hamb-top"></span>
		<span class="hamb-middle"></span>
		<span class="hamb-bottom"></span>
	  </button>
	</div>
	<!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->


<script type="text/javascript">
	$(document).ready(function () {
	  var trigger = $('.hamburger'),
		  overlay = $('.overlay'),
		 isClosed = false;

		trigger.click(function () {
		  hamburger_cross();      
		});

		function hamburger_cross() {

		  if (isClosed == true) {          
			overlay.hide();
			trigger.removeClass('is-open');
			trigger.addClass('is-closed');
			isClosed = false;
		  } else {   
			overlay.show();
			trigger.removeClass('is-closed');
			trigger.addClass('is-open');
			isClosed = true;
		  }
	  }
	  
	  $('[data-toggle="offcanvas"]').click(function () {
			$('#wrapper').toggleClass('toggled');
	  });  
	});
</script>


</body>
</html>